var file = "";
$(document).ready(function () {


    sysUser();


});
//弹出框水平垂直居中
(window.onresize = function () {
    var win_height = $(window).height();
    var win_width = $(window).width();
    if (win_width <= 768) {
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
            "left": 0
        });
    } else {
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
            "left": (win_width - $(".tailoring-content").outerWidth()) / 2
        });
    }
})();

//弹出图片裁剪框
$("#replaceImg").on("click", function () {
    $(".tailoring-container").toggle();
});

//图像上传
function selectImg(file) {
    if (!file.files || !file.files[0]) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        var replaceSrc = evt.target.result;
        //更换cropper的图片
        $('#tailoringImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
    }
    reader.readAsDataURL(file.files[0]);
}

//cropper图片裁剪
$('#tailoringImg').cropper({
    aspectRatio: 1 / 1,//默认比例
    preview: '.previewImg',//预览视图
    guides: false,  //裁剪框的虚线(九宫格)
    autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
    movable: false, //是否允许移动图片
    dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
    movable: true,  //是否允许移动剪裁框
    resizable: true,  //是否允许改变裁剪框的大小
    zoomable: false,  //是否允许缩放图片大小
    mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
    touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
    rotatable: true,  //是否允许旋转图片
    crop: function (e) {
        // 输出结果数据裁剪图像。
    }
});
//旋转
$(".cropper-rotate-btn").on("click", function () {
    $('#tailoringImg').cropper("rotate", 45);
});
//复位
$(".cropper-reset-btn").on("click", function () {
    $('#tailoringImg').cropper("reset");
});
//换向
var flagX = true;
$(".cropper-scaleX-btn").on("click", function () {
    if (flagX) {
        $('#tailoringImg').cropper("scaleX", -1);
        flagX = false;
    } else {
        $('#tailoringImg').cropper("scaleX", 1);
        flagX = true;
    }
    flagX != flagX;
});

//裁剪后的处理
$("#sureCut").on("click", function () {
    if ($("#tailoringImg").attr("src") == null) {
        file = "";
        return false;
    } else {
        var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
        var base64url = cas.toDataURL('image/jpg'); //转换为base64地址形式

        $("#finalImg").prop("src", base64url);//显示为图片的形式

        base64url = base64url.substring(22);

        file = base64url;

        //关闭裁剪框
        closeTailor();
    }
});

//关闭裁剪框
function closeTailor() {
    $(".tailoring-container").toggle();
}

function subphoto() {
    if (file == "") {
        $.MsgBox.Alert("消息", "请选择头像！");
        return;
    }
    if (file.length > 2000000) {
        $.MsgBox.Alert("消息", "剪裁区域的图片过大，上传头像大小不能超过2M！现在大小约为：" + Math.floor((file.length / 1000000)) + "M");
        return;
    }
    uploadFile();
}

function sysUser() {
    $.ajax({
        type: "GET",
        url: "/post/user/api/sysUserInfo",
        contentType: 'application/json;charset=UTF-8',
        dataType: "json",
        success: function (result) {
            console.log(result);
            let data;
            try {
                data = checkResultAndGetData(result);
            } catch (error) {
            }
            $("#finalImg").attr('src', data.photo);
        }
    });
}


function uploadFile() {
    let formData = new FormData();
    let file = $('#chooseImg')[0].files[0];
    formData.append('file', file);
    $.ajax(
        {
            url: '/post/user/api/upload',
            type: 'POST',
            data: formData,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对data数据的处理,默认会处理，禁止的原因是,FormData已经帮我们做了处理
            dataType: "json",
            error: function (XMLHttpRequest, textStatus, text) {
                $.MsgBox.Alert("消息", "出错了，请于管理员联系");
            },
            success: function (result) {
                console.log(result);
                let data;
                try {
                    data = checkResultAndGetData(result);
                } catch (error) {
                    console.log(error)
                    // alert(JSON.stringify(error));
                    $.MsgBox.Alert("消息", "出错了，请于管理员联系");
                    return;
                }
                if (data) {
                    $.MsgBox.Alert("消息", "上传成功");
                } else {
                    $.MsgBox.Alert("消息", "上传失败，请重试");
                }
            }
        }
    );
}

function checkResultAndGetData($result) {
    if ($result.success == false) {
        throw $result;
    }
    return $result.data;
}